<template>
	<view>
		<Navtop title="联盟商家" :searchShow="false"></Navtop>
		<view class="container" :style="{paddingTop:statusBarHeight+60+'px'}">
			<view class="card">
				<view class="shop-info flex align-center">
					<view class="avatar">
						<image src="@/static/images/f.png" mode="aspectFill" class="image"></image>
					</view>
					<view>
						<view class="title">
							烟酒百货商场
						</view>
						<view class="tags">
							仅可到店消费
						</view>
						<view class="score">
							5.0分
						</view>
						<view class="Integral">
							
						</view>
					</view>
				</view>
				<view class="image-scorll-container">
					<scroll-view scroll-x="true" >
						<view class="scroll">
							<view class="scroll-img-item">
								<image src="@/pages/plantGrass/static/images/plant_bg.jpg" mode="aspectFill" class="image"></image>
							</view>
							<view class="scroll-img-item">
								<image src="@/pages/plantGrass/static/images/plant_bg.jpg" mode="aspectFill" class="image"></image>
							</view>
							<view class="scroll-img-item">
								<image src="@/pages/plantGrass/static/images/plant_bg.jpg" mode="aspectFill" class="image"></image>
							</view>
							<view class="scroll-img-item">
								<image src="@/pages/plantGrass/static/images/plant_bg.jpg" mode="aspectFill" class="image"></image>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="flex justify-between ">
					<view class="flex-grow">
						<view class="m-top">
							<span class="state">营业中</span><span>07:00-23:00</span>
						</view>
						<view class="addrss m-top">
							浙江省温州市瑞安市中心路125号
						</view>
						<view class="distance m-top">
							距您 7 km
						</view>
					</view>
					<view class="icon">
						
					</view>
				</view>
				<view class="flex justify-between card-bottom m-top">
					<span>查看商家资质</span>
					<span class="iconfont2 icon-right"></span>
				</view>
			</view>
			<view class="bottom flex align-center flex-grow flex-basis">
				<view>
					<span></span>
					<span>去打卡</span>
				</view>
				<view>
					<span></span>
					<span>分享好店</span>
				</view>
				<view>
					<span></span>
					<span>写评论</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
	
import Navtop from '../component/navTop.vue'


export default {
	components:{Navtop},
	data(){
		return {
			statusBarHeight:statusBarHeight,
		}
	},
	methods:{
		
	}
}
</script>

<style lang="scss" scoped>
.flex{
	display: flex;
}
.flex-grow{
	flex-grow: 1;
}
.align-center{
	align-items: center;
}
.justify-between{
	justify-content: space-between;
}
.flex-basis{
	flex-basis: 0;
}
.image{
	width: 100%;
	height: 100%;
}
.m-top{
	margin-top: 8rpx;
}

.container{
	height: 100vh;
}

.card{
	background-color: white;
	border-radius: 12rpx;
	padding: 20rpx;
	margin: 0 20rpx;
	.avatar{
		width: 100rpx;
		height: 100rpx;
		border-radius: 8rpx;
		margin-right: 12rpx;
	}
	.title{
		font-size: 26rpx;
		font-weight: bold;
	}
	.tags{
		border-radius: 4rpx;
		border: 3rpx solid #f94d2a;
		
		background-color: rgba(199,29,35,0.06);
		color: #f7a500;
		font-size: 18rpx;
		padding: 2rpx 8rpx;
		width: fit-content;
		font-weight: bold;
		letter-spacing: 2rpx;
	}
	.score{
		font-size: 24rpx;
		font-weight: bold;
		color: #f77102;
	}
	
	.image-scorll-container{
		margin-top: 16rpx;
		.scroll{
			display: flex;
			overflow: hidden;
			width: fit-content;
			width: 2000px;
			.scroll-img-item{
				width: 240rpx;
				height: 160rpx;

				flex-shrink: 0;
				margin-right: 24rpx;
				border-radius: 16rpx;
				overflow: hidden;
				.image{
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	
	.card-bottom{
		padding-top: 8rpx;
		border-top: 2rpx solid #d3d3d3;
		font-size: 26rpx;
	}
	
	.state{
		color: #16A34A;
		padding-right: 12rpx;
	}
}

.bottom{
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	padding: 20rpx 0;
	background-color: white;
	view{
		flex-grow: 1;
		text-align: center;
	}
}
</style>